<%--
  Created by IntelliJ IDEA.
  User: HP
  Date: 2020/5/27
  Time: 15:05
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="true"%>
<html>
<head>
    <title>销售订单查询</title>
    <%@include file="/comm/head.jsp"%>
</head>
<body>
<div id="root">
    <i-table :columns="columns" :data="pageResult.rows"  :height="300"  border stripe>
        <template slot-scope="{row}" slot="username">
            <span>{{row.user.username}}</span>
        </template>
        <template slot-scope="{row}" slot="proName">
            <span>{{row.provider.proName}}</span>
        </template>
        <template slot-scope="{row,index}"  slot="action">
            <i-button type="warning" @click="searchRow(row,index)">详 情</i-button>
        </template>
        <template slot-scope="{row}" slot="state">
            <span>{{row.state==0?"未出库":"已出库"}}</span>
        </template>
    </i-table>
    <modal v-model="searchFlag" title="详细信息查询"  :width="1400" @on-ok="searchDetail()">
        <i-table :columns="columns1" :data="data2"  :height="100"  border stripe>
            <template slot-scope="{row}" slot="proName">
                <span>{{row.provider.proName}}</span>
            </template>
            <template slot-scope="{row}" slot="state">
                <span>{{row.state==0?"未出库":"已出库"}}</span>
            </template>
            <template slot-scope="{row}" slot="username">
                <span>{{row.user.username}}</span>
            </template>
        </i-table>
        <i-table :columns="columns2" :data="data3" border stripe :height="300">
            <template slot-scope="{row}" slot="id">
                <span>{{row.id}}</span>
            </template>
            <template slot-scope="{row}" slot="goodsId">
                <span>{{row.goodsId}}</span>
            </template>
            <template slot-scope="{row}" slot="goodName">
                <span>{{row.goodName}}</span>
            </template>
            <template slot-scope="{row}" slot="price">
                <span>{{row.price}}</span>
            </template>
            <template slot-scope="{row}" slot="num">
                <span>{{row.number}}</span>
            </template>
            <template slot-scope="{row}" slot="money">
                <span>{{row.money}}</span>
            </template>
            <template slot-scope="{row}" slot="state">
                <span>{{row.state==0?"未出库":"已出库"}}</span>
            </template>
        </i-table>
    </modal>

    <Page :total="pageResult.total"
          :page-size="pageSize"
          @on-change="pageNo=arguments[0];search();"
          show-sizer
          :page-size-opts="[5,10,15]"
          @on-page-size-change="pageSize=arguments[0];search();"
    />

</div>

<script>
    new Vue({
        el:"#root",
        data:{
            columns:[
                // {type:"selection",width:60,align:"center"},//自动开启多选功能
                { key:"id",title:"编号"},
                {key:"createTime",title:"录入日期"},
                // {key:"checkTime",title:"出库日期"},
                // {key:"purchaseTime",title:"确认日期"},
                // {title:"入库日期",key: "stockTime"},
                // {title:"下单员",slot: "username"},
                // {title:"审核员",slot: "username"},
                {title:"销售员",slot:"username"},
                {title:"库管员",slot:"username"},
                { slot:"proName",title:"客户",width:"200"},
                // {title:"总金额",key:"totalMoney"},
                {title:"订单状态",slot:"state"},
                // {title:"运单号",key:"wayBillCode"},
                {title:"操作",slot:"action"}
            ],
            columns1:[
                { slot:"proName",title:"供应商"},
                {title:"订单状态",slot:"state"},
                {title:"下单员",slot: "username"},
                {title:"审核员",slot: "username"},
                // {title:"采购员",slot:"username"},
                {title:"库管员",slot:"username"},
                // {title:"入库日期",key:"stockTIME"},
                {title:"下单日期",key: "createTime"},
                {title:"审核日期",key: "checkTime"},
                {title:"运单号",key:"wayBillCode"}

            ],
            columns2:[
                {title:"编号",slot:"id"},
                {title:"商品编号",slot: "goodsId"},
                {title:"商品名称",slot: "goodName"},
                {title:"价格",slot: "price"},
                {title:"数量",slot:"num"},
                {title:"金额",slot:"money"},
                {title:"订单状态",slot:"state"},

            ],

            pageResult:{
                rows:[],
                total:50
            },
            pageNo:1,
            pageSize:5,
            providerList:[],
            orderVo: {},
            order:{},
            orderdetail:{},
            data3:[],
            data:[],
            data2:[],
            myData2:[],
            searchFlag:false

        },
        methods:{
            search(){
                axios.get(`${ctx}/caiGou/sq/salList/${this.pageNo}/${this.pageSize}`)
                    .then(({data})=>{
                        this.pageResult=data.result;
                    });
            },
            searchProvider(){
                axios.get(`${ctx}/sys/provider/list`)
                    .then(({data})=>{
                        this.providerList=data.result;
                    });
            },
            searchRow(row,index){
                this.searchFlag=true;
                axios.get(`${ctx}/caiGou/sq/search?id=${row.id}`)
                    .then(({data})=>{
                        console.log(data.result)
                        this.data2=data.result;
                        this.search();
                    });
                axios.get(`${ctx}/caiGou/sq/list?id=${row.id}`)
                    .then(({data})=>{
                        // console.log(data.result)
                        this.data3=data.result;
                        this.search();
                    });

            },




        },
        mounted(){
            this.search();
            this.searchProvider();
            // this.searchRow();


        }


    });
</script>
</body>
</html>
